<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>h5文件系统接口</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="./script.js" defer></script>
  </head>
  <body>
    <div class="main-container">
      <div class="sidebar" id="sidebar">
        <div class="sidebar-header">
          <p>资源管理器</p>
          <div class="sidebar-actions" id="sidebar-actions">
            <button title="在根目录创建文件" data-action="new-root-file">＋</button>
            <button title="在根目录创建文件夹" data-action="new-root-folder">⊕</button>
            <button title="打开新文件夹" data-action="open-new-folder" id="openNewFolderBtn">
              📂
            </button>
          </div>
        </div>
        <div class="sidebar-content">
          <div class="open-buttons-container" id="open-buttons-container">
            <button id="openFolderBtn" class="action-button">打开文件夹</button>
            <button id="openFileBtn" class="action-button-secondary">打开文件</button>
          </div>
          <div id="file-tree" class="file-tree">
            <div class="placeholder" id="tree-placeholder">将文件夹或文件拖拽至此打开</div>
          </div>
        </div>
      </div>
      <div class="resizer" id="resizer"></div>
      <div class="main-content">
        <div id="editor-container" class="editor-container">
          <div class="editor-area">
            <div id="editor-placeholder" class="placeholder">
              <div class="welcome-content">
                <h2>本地文件编辑器</h2>
                <p>1. <b>拖拽文件或文件夹</b>到此窗口</p>
                <p>2. 或点击左侧按钮打开</p>
                <p>3. 在文件树中拖拽可移动文件</p>
              </div>
            </div>
            <div class="editor-wrapper" id="editor-wrapper" style="display: none">
              <div class="line-numbers" id="line-numbers">1</div>
              <textarea id="editor" spellcheck="false"></textarea>
            </div>
          </div>
          <div class="editor-footer">
            <div id="file-path-display"></div>
            <button id="saveFileBtn" class="action-button-save" disabled>保存</button>
          </div>
        </div>
      </div>
    </div>
    <div id="context-menu" class="context-menu">
      <ul>
        <li data-action="rename">重命名</li>
        <li data-action="delete">删除</li>
      </ul>
    </div>
  </body>
</html>
